<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
</head>
<body>
    <canvas id="circuitCanvas" width="500" height="380"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.font = '18px Arial';
        ctx.textAlign = 'center';

        // --- Draw Wires ---
        ctx.beginPath();

        // Top wire
        ctx.moveTo(80, 50);
        ctx.lineTo(210, 50);
        ctx.moveTo(280, 50);
        ctx.lineTo(420, 50);

        // Vertical wires
        ctx.moveTo(80, 50);
        ctx.lineTo(80, 250);
        ctx.moveTo(420, 50);
        ctx.lineTo(420, 250);

        // Bottom wire segments
        ctx.moveTo(80, 250);
        ctx.lineTo(120, 250); // To 55 Ohm resistor
        ctx.moveTo(190, 250); // From 55 Ohm resistor
        ctx.lineTo(240, 250); // To parallel junction 1
        ctx.moveTo(360, 250); // From parallel junction 2
        ctx.lineTo(420, 250); // To right vertical wire

        // Parallel branch wires
        // Left side of parallel block
        ctx.moveTo(240, 250);
        ctx.lineTo(240, 210); // Up to top branch
        ctx.moveTo(240, 250);
        ctx.lineTo(240, 290); // Down to bottom branch

        // Top branch
        ctx.moveTo(240, 210);
        ctx.lineTo(260, 210); // To 60 Ohm resistor
        ctx.moveTo(340, 210); // From 60 Ohm resistor
        ctx.lineTo(360, 210);

        // Bottom branch
        ctx.moveTo(240, 290);
        ctx.lineTo(260, 290); // To 30 Ohm resistor
        ctx.moveTo(340, 290); // From 30 Ohm resistor
        ctx.lineTo(360, 290);

        // Right side of parallel block
        ctx.moveTo(360, 210);
        ctx.lineTo(360, 250); // Down to junction 2
        ctx.moveTo(360, 290);
        ctx.lineTo(360, 250); // Up to junction 2

        ctx.stroke();

        // --- Draw Components ---

        // Battery (3 cells)
        // Cell 1
        ctx.beginPath();
        ctx.moveTo(210, 40);
        ctx.lineTo(210, 60);
        ctx.moveTo(220, 35);
        ctx.lineTo(220, 65);
        // Cell 2
        ctx.moveTo(235, 40);
        ctx.lineTo(235, 60);
        ctx.moveTo(245, 35);
        ctx.lineTo(245, 65);
        // Cell 3
        ctx.moveTo(260, 40);
        ctx.lineTo(260, 60);
        ctx.moveTo(270, 35);
        ctx.lineTo(270, 65);
        ctx.stroke();

        // Resistors
        // 55 Ohm Resistor
        ctx.strokeRect(120, 240, 70, 20);
        ctx.textBaseline = 'bottom';
        ctx.fillText('55 Ω', 155, 235);

        // 60 Ohm Resistor
        ctx.strokeRect(260, 200, 80, 20);
        ctx.fillText('60 Ω', 300, 195);

        // 30 Ohm Resistor
        ctx.strokeRect(260, 280, 80, 20);
        ctx.fillText('30 Ω', 300, 275);

        // Junction Dots
        function drawJunction(x, y) {
            ctx.beginPath();
            ctx.arc(x, y, 4, 0, 2 * Math.PI);
            ctx.fill();
        }
        drawJunction(240, 250);
        drawJunction(360, 250);
        
        // --- Draw Label ---
        ctx.textBaseline = 'alphabetic';
        ctx.fillText('Fig. 9.1', 250, 360);

    </script>
</body>
</html>